<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的复制</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 20px;
        }
        head{
            display: block;
            margin: 50px auto;
        }
        hr{
            margin-top: 20px;
        }
    </style>
    <script>
        //点击按钮将l1添加list2中
    document.addEventListener("DOMContentLoaded",function(){
        const btn01=document.getElementById("btn01")
        const btn02=document.getElementById("btn02")
        const btn03=document.getElementById("btn03")

        const list2=document.getElementById("list2")
        const l1=document.getElementById("l1")

        btn01.addEventListener("click",function(){
            list2.insertAdjacentElement("beforeend",l1)
        })
        btn02.addEventListener("click",function(){
            const new_l1=document.createElement("li")
            new_l1.innerText=l1.innerText
            list2.insertAdjacentElement("beforeend",new_l1)
        })
        // 克隆节点 cloneNode() 
        /* 
            1.使用cloneNode()对节点进行复制时，会复制节点的所有属性（id,class...）
            2.默认为false,只会复制当前节点，不会复制当前节点的子节点。
            3.参数为true时，即复制当前节点，也复制子节点。
        */
        btn03.addEventListener("click",function(){
            const cloneLi=l1.cloneNode(true)
            cloneLi.id="newL1"

            list2.insertAdjacentElement("beforeend",cloneLi)
        })
    })
    </script>
</head>
<body>
    <head>点击按钮将孙悟空添加下面中</head>
    <hr>
    <button id="btn01">移动</button>
    <button id="btn02">点我一下</button>
    <button id="btn03">点我一下</button>
    <ul id="list1">
        <li id="l1">孙悟空</li>
        <li id="l2">猪八戒</li>
        <li id="l3">沙和尚</li>
    </ul>
    <hr>
    <ul id="list2">
        <li>白骨精</li>
    </ul>
</body>
</html>